<template>
	<div>
		<div class="searchHeader">
			<el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
			<el-button size="mini" type="primary" icon="el-icon-search">
				搜索用户
			</el-button>
			<el-button size="mini" type="success">
				导出Extel
			</el-button>
			<el-button size="mini" type="success">
				导入数据
			</el-button>
		</div>
		<el-table border v-loading="loading" :data="UserData" style="width: 100%;">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column fixed label="用户名称">
				<template slot-scope="scope">
					<el-button @click="" type="text">{{scope.row.username}}</el-button>
				</template>
			</el-table-column>
			<el-table-column  label="用户昵称">
				<template slot-scope="scope">
					{{scope.row.nickname}}
				</template>
			</el-table-column>
			<el-table-column label="性别" width="50px">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.gender">女</el-tag>
					<el-tag type="danger" v-else="scope.row.gender">男</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="注册时间" width="180px">
				<template slot-scope="scope">
					{{scope.row.joinTime}}
				</template>
			</el-table-column>
			<el-table-column label="邮箱地址" width="180px">
				<template slot-scope="scope">
					{{scope.row.email}}
				</template>
			</el-table-column>
			<el-table-column label="坐标" width="200px">
				<template slot-scope="scope">
					{{scope.row.location}}
				</template>
			</el-table-column>
			<el-table-column label="座右铭" width="150px">
				<template slot-scope="scope">
					{{scope.row.sign}}
				</template>
			</el-table-column>
			<el-table-column label="最后登陆时间" width="180px">
				<template slot-scope="scope">
					{{scope.row.lastTime}}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="150px">
				<el-button size="mini" @click="">编辑</el-button>
				<el-button size="mini" type="danger" @click="">删除</el-button>
			</el-table-column>
		</el-table>
		<br>
		<div>
			<el-button :disabled="multiDelBtn" size="small" type="danger">批量删除</el-button>
		</div>
		<br>
		<el-pagination background layout="prev,pager,next" @current-change="currentChange" :page-size="pageSize"
			:total="total"></el-pagination>
	</div>
</template>

<script>
	export default {
		name: "CommonUser",
		data: function() {
			return {
				keyWords: '',
				loading: false,
				total: 0,
				multiDelBtn: true,
				UserData: [],
				pageSize: 10
			}
		},
		methods: {
			currentChange(pageNum) {

			},
			initUserDatas() {
				this.$getRequest('/user/list')
					.then(resp => {
						if (resp) {
							this.UserData = resp.data;
							this.total = resp.total;
						}
					})
			}
		},
		mounted() {
			this.initUserDatas();
		}
	}
</script>

<style>
	.searchHeader {
		margin-bottom: 10px;
	}

	.searchHeader .articleSearchText {
		width: 300px;
		margin-right: 10px;
	}
</style>
